
<!--
   @ yang
   @desc 改组件主要是做上拉下拉加载分页
   @lock-x 锁定X方向
   @use-pullup  是否使用上拉组件 是
   @use-pulldown 是否使用下拉组件 是
   @pulldown-config 下拉组件配置
   @pullup-config 上拉组件配置
   @on-pullup-loading 用户触发上拉刷新状态，监听该事件以获取加载新数据
   @on-pulldown-loading 用户触发下拉刷新状态，监听该事件以获取加载新数据
-->
<template>
  <div>
    <scroller
        lock-x
        use-pullup
        use-pulldown
        height="500px"
        :pulldown-config="pulldownDefaultConfig"
        :pullup-config="pullupDefaultConfig"
        @on-pullup-loading="fnLoadMore"
        @on-pulldown-loading="fnRefresh"
        ref="scrollerBottom">
        <slot></slot>
    </scroller>
  </div>
</template>
<script>
  import {
    Scroller,
    LoadMore
  } from 'vux';
  import {
    PULL_DOWN_CONFIG,
    PULL_UP_CONFIG
  } from 'common/js/config'
  export default {
    name: 'targetScroller',
    props: {
      // 是否显示没有更改
      isNotMore: {
        type: Boolean,
        default: false
      },
      // 滚动高度
      pullHeight: {
        type: String,
        default: document.documentElement.clientHeight + 'px'
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset({
          top: 0
        })
      })
    },
    data() {
      return {
        tip: '暂无数据',
        pullupDefaultConfig: PULL_UP_CONFIG,
        pulldownDefaultConfig: PULL_DOWN_CONFIG
      }
    },
    methods: {

      /**
       * @author yang
       * @desc 触发上拉加载并派发事件给外部
       */
      fnLoadMore() {
        // 如果当前不需要上拉刷新久禁止刷新
        if (this.isNotMore) {
          this.$refs.scrollerBottom.disablePullup()
        }
        this.$emit('fnEmitLoadMore')
        this.$refs.scrollerBottom.donePullup()
      },

      /**
       * @author yang
       * @desc 触发下拉加载并派发事件给外部
       */
      fnRefresh() {
        this.$emit('fnEmitRefresh')
      },

      /**
       * @author yang
       * @desc 数据加载完之后重置一些默认配置
       */
       fnRestConfig() {
         this.$refs.scrollerBottom.enablePullup()
         this.$refs.scrollerBottom.donePulldown()
       }

    },
    components: {
      Scroller,
      LoadMore
    }
  }
</script>
